<template>
  <view class="receive-gift">
    <view class="gift-header"><h2>来《中国联通APP》领好礼</h2></view>
    <view class="gift-bodyer">
      <view class="gift-title">领28元美团劵和30元京东劵</view>
      <view class="gift-list" v-if="list.length">
        <view class="list-item" v-for="item in list" :key="item.goodsId">
          <view class="item-img">
            <image :src="item.goodsImg" mode="widthFix"></image>
            <view>{{item.goodsDesc}}</view>
          </view>
          <h3>{{item.goodsName}} <button :class="item.isGet == '1'?'active':''" @click="handleClickReceive(item)">{{item.isGet == '1'?'去使用':'免费领'}}</button></h3>
        </view>
      </view>
      <view class="var-empty" v-else>暂无数据</view>
    </view>
    <uni-popup ref="popup" type="center">
      <view class="popup-main" v-if="current.goodsId">
        <image class="main-close" @click="$refs.popup.close()" src="@/static/images/close.png" mode="widthFix"></image>
        <view class="main-body">
          <h2>恭喜您领取成功</h2>
          <h4>{{current.goodsName}}</h4>
          <image :src="current.popupImg" mode="widthFix"></image>
          <button @click="handleUse()">马上使用</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import point from '@/network/point.js'
  export default {
    name:"receive-gift",
    props:{
      sign:{
        type:'',
        default:''
      },
      phone:{
        type:[Number,String],
        require:true
      },
    },
    data() {
      return {
        list:[],
        current:{}
      };
    },
    created(){
      this._getCouponInfo()
    },
    methods:{
      handleClickReceive(e){ ///   点击领取卷
        this.current = e
        if(e.goodsType == 1){
          if(e.isGet == '1'){
            window.open(e.jumpUrl)
            return;
          }
          uni.showLoading({
            title:'加载中...'
          })
          this.$get(`/coupon/getCoupon?userPhone=${this.phone}&goodsId=${e.goodsId}`,'','1',{sign:this.sign}).then(res=>{
            if(res.code == 200){
              this.$refs.popup.open()
              this._getCouponInfo()
            }else{
              uni.showToast({
                title:res.msg,
                icon:'error'
              })
            }
          })
        }else{
          window.open(e.jumpUrl)
        }
        point({
          action_code:"910000004",//对照表填 必须传
          action_type:"click",//对照表填 必须传
          source_url: "910000000", //对照表填 必须传
          present_url: "910000000",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "tmhd",
          },
          {
            k: "user_phone", //必须传
            v: this.phone,
          },
          {
            k: "user_ip",  // 必须传
            v: getApp().globalData.ip,
          },
          {
            k: "goods_name",  // 必须传
            v: e.goodsName,
          }
        ]})
      },
      handleUse(){  ///  使用卷
        window.open(this.current.jumpUrl)
        point({
          action_code:"910000005",//对照表填 必须传
          action_type:"click",//对照表填 必须传
          source_url: "910000000", //对照表填 必须传
          present_url: "910000000",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "tmhd",
          },
          {
            k: "user_phone", //必须传
            v: this.phone,
          },
          {
            k: "user_ip",  // 必须传
            v: getApp().globalData.ip,
          },
          {
            k: "goods_name",  // 必须传
            v: this.current.goodsName,
          }
        ]})
      },
      
      ////            network
      async _getCouponInfo(){  ///   请求优惠卷列表
        const res = await this.$get('/coupon/couponInfo?userPhone='+this.phone,'','',{sign:this.sign})
        if(res.code == 200){
          this.list = res.data.couponList
        }else{
          uni.showToast({
            title:res.msg
          })
        }
      }
    }
  }
</script>

<style lang="less">
  .receive-gift{
    border-radius: 20rpx;
    padding: 20rpx 0;
    background: #fff;
    .gift-header{
      border-bottom: .5px solid #ccc;
      padding: 10rpx 24rpx;
      h2{
        font-size: 30rpx;
        color: #333;
        padding-left: 20rpx;
        position: relative;
        line-height: 1;
        margin-bottom: 20rpx;
        &::before{
          display: block;
          content: '';
          background: #e50125;
          width: 10rpx;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
    } //  gift-header
    
    .gift-bodyer{
      padding: 24rpx 32rpx;
      .gift-title{
        padding:0 8rpx;
        color: #e60027;
        font-size: 28rpx;
        margin-bottom: 22rpx;
      }
      .gift-list{
        display: flex;
        justify-content: space-between;
        .list-item{
          width: 47%;
          border-radius: 10rpx;
          border: .5px solid #ccc;
          .item-img{
            position: relative;
            view{
              position: absolute;
              bottom: 0;
              left: 0;
              background: rgba(0,0,0,.3);
              color: #fff;
              font-size: 24rpx;
              width: 240rpx;
              line-height: 1;
              padding: 6rpx 0;
              text-align: center;
            }
          }
          uni-image{
            width: 100%;
          }
          h3{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 26rpx;
            padding: 15rpx 10rpx;
            button{
              color: #fff;
              background: #e20227;
              font-size: 24rpx;
              margin: 0;
              padding: 15rpx 20rpx;
              border-radius: 50rpx;
              border: .5px solid transparent;
              line-height: 1;
              &.active{
                background: #fff;
                color: #e20227;
                border-color: #e20227;
              }
            }
          }
        }
      } /// .gift-list end
    } //   gift-bodyer end
    
    
    .popup-main{
      text-align: right;
      width: 80vw;
      .main-close{
        width: 60rpx;
      }
      .main-body{
        text-align: center;
        padding: 40rpx 50rpx;
        background: #fff;
        border-radius: 30rpx;
        margin-top: 20rpx;
        h2{
          font-size: 36rpx;
        }
        h4{
          font-size: 34rpx;
          color: #fb6e51;
          font-weight: 400;
          margin: 10rpx 0;
        }
        uni-image{
          width: 340rpx;
        }
        button{
          color: #fff;
          background: #e20227;
          margin: 0;
          border-radius: 50rpx;
          font-size: 30rpx;
          line-height: 80rpx;
          margin-top: 34rpx;
        }
      }
    }
    
  }  // .receive-gift end
</style>